<template>
  <div class="app-container">
    <part-comp title="操作记录" class="mb_15"/>
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="formbox whitebg m_20 mb_15">
        <el-form-item label="操作人：" prop="username">
            <el-input v-model="queryParams.username" style="width:136px"
                placeholder="请输入操作人"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="操作类型:" prop="type">
            <el-select v-model="queryParams.type" size="small" clearable placeholder="状态" @change="handleQuery" style="width:100px">
                <el-option
                    v-for="dict in stausList"
                    :key="dict.id"
                    :label="dict.name"
                    :value="dict.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="操作时间时间:">
            <el-date-picker size="small"
                v-model="activeTimes"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleQuery">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="tablebox whitebg m_20">
        <el-table v-loading="listLoading"
            :data="list"
            class="whitetable">
            <el-table-column label="序号" prop="id" >
                <template slot-scope="scope">
                    <span>{{(queryParams.page - 1) * queryParams.num + scope.$index + 1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作人">
                <template slot-scope="scope">
                    <span class="">{{scope.row.user?scope.row.user.user_login:'-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作类型" prop="user_login" >
                <template slot-scope="scope">
                    <span class="" v-if="scope.row.type == 1">修改标题</span>
                    <span class="" v-if="scope.row.type == 2">修改规则</span>
                    <span class="" v-if="scope.row.type == 3">修改每单金额</span>
                </template>
            </el-table-column>
            <el-table-column label="操作前" prop="user_login" >
                <template slot-scope="scope">
                    <div v-html="scope.row.oldmsg" class="overflowY" ></div>
                    <!-- <span class="">{{scope.row.old_value||'-'}}</span> -->
                </template>
            </el-table-column>
            <el-table-column label="操作后" prop="user_login" >
                <template slot-scope="scope">
                    <div v-html="scope.row.newmsg" class="overflowY" ></div>
                    <!-- <span class="">{{scope.row.new_value||'-'}}</span> -->
                </template>
            </el-table-column>
            <el-table-column label="操作时间">
                <template slot-scope="scope">
                    <span>{{scope.row.create_time}}</span>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.num"
            @pagination="getList"
            />
    </div>
  </div>
</template>

<script>
import PartComp from '@/components/PartComp';
import { getruleList } from '@/api/rule'
export default {
    components:{
        PartComp
    },
    data(){
        return {
            queryParams:{
                page:1,
                num:10,
                name:'',
                account:''
            },
            listLoading:false,
            list:[],
            stausList:[{id:1,name:'修改标题'},{id:2,name:'修改规则'},{id:3,name:'修改每单金额'}],
            total:0,
            activeTimes:[],
        }
    },

    created(){
        this.getList();
    },

    methods:{

        decodeHTM(html){
            var txt =document.createElement('textarea');
            txt.innerHTML = html;
            return txt.value;
        },

        getList(){
            this.listLoading=true;
            let params = {
                page:this.queryParams.page,
                num:this.queryParams.num,
            }
            if(this.queryParams.username){
                params.username = this.queryParams.username
            }
            
            if(this.queryParams.type){
                params.type = this.queryParams.type
            }
            if(this.activeTimes&&this.activeTimes.length){
                params.startime=this.activeTimes[0];
                params.endtime=this.activeTimes[1];
            }
            getruleList(params).then(res=>{
                this.listLoading=false;
                this.list = res.data.list.map(item=>({...item,oldmsg:this.decodeHTM(item.old_value),newmsg:this.decodeHTM(item.new_value)}));
                this.total = res.data.count;
            }).catch(()=>{
                this.listLoading=false;
            })
        },

        handleQuery(){
            this.queryParams.page = 1;
            this.getList();
        },

        resetQuery(){
            this.resetForm("queryForm");
            this.activeTimes=[];
            this.handleQuery();
        },
        
        // 查看详情
        handleDetail(row){
            this.rowinfo=row;
            this.detaildialog = true;
        },


        handleCloseDetail(type){
            // if(type==1){
            //     this.getList();
            // }
            this.detaildialog = false
        },


        handlePay(row){
            this.payitem = row;
            this.paydialog=true;
        },

        handleClosePay(type){
            if(type==1){
                this.getList();
            }
            this.paydialog = false
        }
    }
}
</script>

<style lang="scss" scoped>
.formbox{
    border-radius: 5px;
    padding: 15px 15px 0 15px;
    .el-form-item{
        margin-bottom: 5px;
    }
}
.primarydot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  margin-right: 5px;
  background-color: #1168EB;
}
.reddot{
  background-color: #E63737;
}
.btnflex{
    .line{
        display: inline-block;
        margin:0 10px;
    }
}
.overflowY{
height: 200px;
overflow-y: auto;
}
</style>